<template>
  <div>
    <!-- 搜索栏 -->
    <el-card>
      景点名称<el-input v-model="searchKey" placeholder="请输入内容" clearable=""></el-input>
      <el-button type="primary" round icon="el-icon-search" @click="findByName">查询</el-button>
      <!-- <el-button round icon="el-icon-refresh">重置</el-button> -->
    </el-card>

    <!-- 主体 -->
    <el-card>
      <el-table :border="true" :data="tableData" style="width: 100%">
        <el-table-column label="景点名称" width="240">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>景点描述: {{ scope.row.sightDesc }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="图片" width="150" prop="createTime">
          <template slot-scope="scope">
            <img :src="scope.row.image" style="width: 100px; height: 80px" />
          </template>
        </el-table-column>
        <!--        <el-table-column label="备注" width="240" prop="remark"></el-table-column>-->
        <el-table-column label="备注" width="150">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>备注: {{ scope.row.remark }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">点击查看</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="地址" width="240" prop="address"></el-table-column>

        <el-table-column label="审核状态" width="240" prop="address">
          <template slot-scope="scope">
            <el-tag type="primary"
                    v-if="scope.row.checked===0"
                    disable-transitions>
              未审核
            </el-tag>

            <el-tag type="success"
                    v-if="scope.row.checked===1"
                    disable-transitions>
              审核通过
            </el-tag>

            <el-tag type="danger"
                    v-if="scope.row.checked===2"
                    disable-transitions>
              驳回
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="agree(scope.$index, scope.row)">通过</el-button>
            <el-button size="mini" type="danger" @click="refuse(scope.$index, scope.row)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination @size-change="findSize" @current-change="findPage"
                   :current-page="pageNow" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <el-dialog title="驳 回 理 由" :visible.sync="dialogFormVisible" :before-close="dialogHandleClose" class="thisBlack-bac"
               :modal-append-to-body="false" center destroy-on-close>
      <el-form ref="form" :model="dialogForm" label-width="80px">
        <el-form-item label="驳回理由" prop="detail" :rules="[{ required: true, message: '理由不能为空' }]">
          <el-input type="textarea" v-model="dialogForm.detail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="justify-content: right">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "sightsCheck",

  data() {
    return {
      updateId: 0,
      pageNow: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      searchKey: '',
      lendLists: [],
      dialogForm: {
        detail: ''
      },
      dialogFormVisible: false,
    };
  },

  mounted() {
    this.findPage(this.pageNow, this.pageSize)
  },

  methods: {
    findByName() {
      this.findPage(this.pageNow, this.pageSize)
    },

    // 重置驳回表单
    resetForm() {
      this.dialogForm = {
        detail: ''
      }
    },

    //提交驳回理由
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let uid = JSON.parse(window.sessionStorage.getItem("user")).id
          const { data: res } = await this.$http.post(`/sights/refuse/${this.updateId}/${uid}`, this.dialogForm.detail)
          if (res.status) {
            this.$message.success(res.data)
          }
          else {
            this.$message.error(res.msg)
          }
          this.findPage(this.pageNow, this.pageSize)
          this.dialogFormVisible = false;
          this.dialogFormVisible = false;
          this.viewVisible = false;
        }
      })
    },

    //关闭弹窗提示
    dialogHandleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => { });
    },

    async refuse(index,row) {
      this.dialogForm = {
        detail: ''
      }
      this.updateId = row.id;
      this.dialogFormVisible = true;
    },
    async agree(index,row) {
      console.info(row);
      let uid = JSON.parse(window.sessionStorage.getItem("user")).id
      console.info(uid);
      const {data: res} = await this.$http.post(`/sights/agree/${row.id}/${uid}`);
      if (res.status) {
        this.$message.success(res.data)
      }
      else {
        this.$message.error(res.msg)
      }
      this.findPage(this.pageNow, this.pageSize)
    },

    findPage(page) {
      // console.log(page)
      this.pageNow = page
      if (this.value != '') {
        // 页面变动之后需要查询相同种类的变动页码的数据
        this.$http.get("/sights/check/list/" + this.pageNow + "/" + this.pageSize+"?searchKey="+this.searchKey).then(res => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total
          console.log(this.tableData)
        });
        return
      }
      // this.findAll(page, this.size)
    },
    findSize(size) {
      // console.log(size)
      this.pageSize = size
      this.findPage(this.pageNow, this.pageSize)
    },
  },
};
</script>

<style lang="less" scoped>
.el-input {
  width: 200px;
  margin-left: 10px;
}

.box-div {
  align-items: center;
  justify-content: center;
  display: flex;
  display: -webkit-flex;
}

.el-button {
  margin-left: 10px;
}

.el-card {
  margin-bottom: 10px;
}
</style>
